<template>

  <div>
    <Row>
    <Card>
      <div class="top-tool-bar">

          <Select  v-model="model2" style="width:100px">
            <Option value="china">中国</Option>
          </Select>

          <Select v-model="model1" style="width:100px" placeholder="请选择省份">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>

          <Select v-model="model1" style="width:100px" placeholder="请选择城市" >
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>

          <Select v-model="model1" style="width:100px" placeholder="请选择区县" >
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>

          <Select v-model="model1" style="width:100px" placeholder="站点">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>

            <Select v-model="model1" style="width:100px" placeholder="筛选条件">
              <Option value="1" >前5年</Option>
              <Option value="2">12个月</Option>
            </Select>

        <DatePicker type="year" placeholder="选择年份" style="width: 100px"></DatePicker>
          <Button type="primary" icon="ios-search" >搜索</Button>
          <Button type="ghost">统计导出</Button>
          <Poptip class="pull-right" placement="bottom-end">
            <Button>说明</Button>
            <div slot="content">
              说明：<br>
              1、气站储量统计模块可通过查询条件，查询不同时间段，不同地区或站点的消耗量情况。<br>
              2、搜索条件国家项默认为中国<br>
              当搜索条件选择至国家时，统计结果为所选国家的消耗量对比；<br>
              当搜索条件选择至省份时，统计结果为所选省份的消耗量对比；<br>
              当搜索条件选择至城市时，统计结果为所选城市的消耗量对比；<br>
              当搜索条件选择至区县时，统计结果为所选区县的消耗量对比；<br>
              当搜索条件选择至站点时，统计结果为所选站点的消耗量对比；<br>
              统计表标题随以上内容变化。<br>
              3、当查询条件为前5年时，时间为选择年份，柱状图展示内容为地区或站点当年起前五年的消耗量；<br>
              当查询条件为12个月时，时间为选择年份，柱状图展示内容为地区或站点当年不同月份的消耗量；<br>
              4、点击统计导出，统计当前及统计图结果导出为Excel表。
            </div>
          </Poptip>
      </div>
      <div id="chart"></div>
    </Card>
    </Row>

  </div>

</template>

<style scoped>
  #chart{
    width: 100%;
    height: 600px;
    margin: 10px auto;
  }
</style>
<script type="text/ecmascript-6">

  //import api from '@/fetch/api';
  import * as echarts from 'echarts';
  import 'echarts/chart/bar';
  import 'echarts/component/toolbox';
  import 'echarts/component/tooltip';
  import 'echarts/component/legend';
  import 'echarts/component/title';

  export default {
    beforeMount () {

    },
    mounted() {
      //this.getList();
      this.initChart()
    },
    data () {
      return {
        loading: true,
        showTip:false,
        list: {},
        cityList: [
          {
            value: 'beijing',
            label: '北京市'
          },
          {
            value: 'shanghai',
            label: '上海市'
          },
          {
            value: 'shenzhen',
            label: '深圳市'
          },
          {
            value: 'hangzhou',
            label: '杭州市'
          },
          {
            value: 'nanjing',
            label: '南京市'
          },
          {
            value: 'chongqing',
            label: '重庆市'
          }
        ],
        model1: '',
          model2: 'china',
        option:{},
      }
    },
    methods: {
      initChart(){
        let $this = this;
        $this.option = {
          title: {
            text: '气站消耗量统计图',
            left: 'center'
          },
          color: ['#3398DB'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              data : ['2013', '2014', '2015', '2016', '2017'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name:'消耗量 ',
              type:'bar',
              barWidth: '60%',
              data:[10, 52, 200, 334, 390]
            }
          ]
        };

        var echartsOne = document.getElementById('chart');
        var myChart = echarts.init(echartsOne);

        myChart.setOption($this.option);
      },
    }
  };
</script>
